<style lang="scss" scoped>
.commodity_info {
  header {
    .swiper {
      height: 2.55rem;
    }
    .commodity {
      padding: 0.15rem 0.15rem 0;
      .price {
        height: 0.5rem;
      }
      input {
        width: 0.5rem;
        height: 0.2rem;
        border: 1px solid #e12825;
        border-radius: 0.2rem;
      }
    }
  }
  main {
    padding-bottom: 0.8rem;
    .tit {
      height: 0.45rem;
      line-height: 0.45rem;
    }
    .info {
      padding: 0.1rem 0;
      li {
        padding: 0.08rem 0;
      }
    }
    .info_img {
      .img-bg {
        height: 3rem;
      }
    }
  }
  footer {
    position: fixed;
    height: 0.65rem;
    bottom: 0;
    left: 0;
    & > div {
      &::before {
        top: 0;
      }
      & > div:first-child {
        width: 0.7rem;
      }
    }
    .exchange {
      padding: 0.08rem 0;
    }
  }
}
</style>

<template>
  <div class="commodity_info">
    <header>
      <div class="swiper img-bg" :style="{backgroundImage:`url(${commodityInfo.imgurl})`}">

      </div>
      <div class="commodity bgfff">
        <div class="font-16">{{commodityInfo.commodityName}}</div>
        <div class="c82  font-12 padding-t5 box-space"><span class="text-remove"> 原价：￥ {{commodityInfo.price}} </span><span>库存{{commodityInfo.stock}}</span></div>
        <div class="flex-col price flex-middle">
          <div class="cred">{{commodityInfo.commodityPrice}}</div>
          <span class="c82 margin-l5">积分</span>
          <div class="box1 font-12 padding-l15">
            <span class="c82">剩余</span>
            {{integral}}积分
          </div>
          <div class="cred flex-col font-18">
            <div class="padding-lr15 box-center" @click="changeMoney">-</div>
            <input type="tel" class="cred text-c" v-model="number" @input="calcTotalPrice">
            <div class="padding-l15 box-center" @click="changeMoney(1)">+</div>
          </div>
        </div>
      </div>
    </header>
    <main class="margin-t10 padding-lr15 bgfff">
      <div class="tit border-b">商品描述</div>
      <ul class="info font-12">
        <li>材质：{{commodityInfo.texture}}</li>
        <li>产地：{{commodityInfo.thesource }}</li>
      </ul>
      <div class="info_img bgfff">
        <div class="img-bg" v-for="(it,i) in describeimg" :key="i" :style="{backgroundImage:`url(${it})`}"></div>
      </div>
    </main>
    <footer class="flex-col bgfff position-f full box-sizing">
      <div class="full border-t flex-col padding-lr15 ">
        <div class="c82 box-center" @click="toRouter('exchange_record')">
          <i class="iconfont icon-shouji"></i>
          兑换记录
        </div>
        <div class="box1 exchange">
          <div class="full bgred cfff bor-r box-center" @click="exchange">立即兑换</div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  name: "commodity_info",
  data() {
    return {
      commodityInfo: {},
      imgurl: [], //商品图片
      describeimg: [], //商品描述图片
      number: 1, //兑换数量
      integral: 0, //当前积分
      needIntegral: 0, //所需积分
      hasBuy: true //积分是否兑换
    };
  },
  mounted() {
    //保证vue初始化完成
    let that = this;
    this.$nextTick(function() {
      that.integral = that.getCache('userInfo').integral;
      that.getCommodityInfo();
    });
  },
  methods: {
    getCommodityInfo() {
      let that = this;
      let commodityCode = this.$route.params.id;
      this.http
        .get("commodity/info/" + commodityCode)
        .then(res => {
          that.commodityInfo = res.data;
          that.describeimg = JSON.parse(res.data.describeimg);
          that.imgurl = JSON.parse(res.data.imgurl);
        })
        .catch(err => {});
    },
    //商品数量变化
    changeMoney(index) {
      let that = this;
      if (index) {
        this.number++;
        if (that.commodityInfo.stock < that.number) {
          this.layer("数量不能超出库存", "m");
          that.number = that.commodityInfo.stock;
        }
      } else {
        this.number--;
        if (this.number == 0) this.number = 1;
      }
      this.calcTotalPrice();
    },
    // 积分是否足够
    calcTotalPrice() {
      if (this.commodityInfo.stock < this.number) {
        this.layer("数量超出库存", "m");
        this.number = this.commodityInfo.stock;
      }
      if (this.number < 1) this.number = 1;
      this.needIntegral = this.commodityInfo.commodityPrice * number;
      if (this.needIntegral > this.integral) this.hasBuy = false;
      else this.hasBuy = true;
    },
    exchange() {
      let that = this;
      if (this.hasBuy) {
        let commodityInfo = this.commodityInfo;
        commodityInfo['number'] = this.number;
        this.setCache('exchange',commodityInfo);
        this.$router.push({
          path: "/exchange/"+that.$route.params.id,
        });
      } else {
        this.layer("你的积分不足", "m");
      }
    }
  }
};
</script>


